<div class="underlying">
  <div class="table">
    <!-- 头部Table -->
    <nz-table #nestedTable style="border-collapse: collapse; border-radius: 4px 4px 0px 0px;  height:100%;"
      [nzData]="listOfData" class="designTable" [nzShowPagination]='false' [nzScroll]="{y:'750px',x:'1390px'}">
      <thead class="tableHeard" style="text-align: center !important;">
        <tr style="text-align: center !important;">
          <th nzWidth=" 50px"></th>
          <!-- 備料狀態👇 -->
          <th nzWidth=" 130px">
            <button nz-button nzTrigger="click" nz-dropdown [nzDropdownMenu]="menu">備料狀態
              <i nz-icon nzType="down"></i>
            </button>
            <nz-dropdown-menu #menu="nzDropdownMenu" class="drop">
              <ul nz-menu>
                <li nz-menu-item class="Li">
                  <nz-radio-group [(ngModel)]="radioValue">
                    <label nz-radio [ngStyle]="style" nzValue="All" (click)="doingForm()">All</label>
                    <label nz-radio [ngStyle]="style" nzValue="備料中" (click)="doingForm()">備料中</label>
                    <label nz-radio [ngStyle]="style" nzValue="已備料" (click)="doingForm()">已備料</label>
                    <label nz-radio [ngStyle]="style" nzValue="缺料" (click)="doingForm()">缺料</label>
                  </nz-radio-group>
                </li>
              </ul>
            </nz-dropdown-menu>
          </th>
          <!-- 单据号🔍 -->
          <th nzWidth=" 230px">單據號</th>

          <!-- 治具名稱 -->
          <th nzWidth=" 230px">治具名稱</th>
          <!-- 需求總量 -->
          <th nzWidth=" 150px">需求總量</th>
          <!-- 費用Charge部門 -->
          <th nzWidth=" 150px">費用Charge部門</th>
          <!-- 工作時間統計 -->

          <th nzWidth=" 150px">工作時間統計</th>
          <!-- 領料時間 -->
          <th nzWidth=" 150px">領料時間</th>
          <!-- 領料期限 -->
          <th nzWidth=" 150px">期限</th>
          <!-- 治具交期 -->
          <th>治具交期</th>
        </tr>
      </thead>
      <!-- 工联单Table -->
      <tbody class="tablecontent" style="border-left: 1px solid rgba(71,156,156,1) !important;">
        <!--  *ngFor="let item of listOfData let key = index" -->
        <ng-container *ngFor="let item of listOfData let key = index">
          <tr id="first">
            <!-- 箭头 -->
            <td nzShowExpand [(nzExpand)]="item.expand" style="color: rgba(48,73,77,1)"
              (nzExpandChange)="collapse(item,key)">
            </td>
            <!-- 備料狀態👇 -->
            <td> <span *ngIf="item.beiliao_ztai==1" style="color: #FACA00;">備料中</span>
              <span *ngIf="item.beiliao_ztai==2" style="color: #21CC97;">已備料</span>
              <span *ngIf="item.beiliao_ztai==3" style="color: #D23B5F;">缺料</span>
            </td>
            <!-- 单据号🔍 -->
            <td style="text-align:left;">{{item.union_order}}</td>
            <!-- 名稱 -->
            <td style="text-align:left;"><span
                style="text-overflow: -o-ellipsis-lastline;
              overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;">{{item.name}}</span>
            </td>

            <!-- 需求總量 -->
            <td>{{item.quatity}}</td>
            <!-- 費用Charge部門 -->
            <td>{{item.charge_department}}</td>

            <!-- 工作時間統計 -->
            <td>{{item.total_time}}</td>
            <!-- 領料時間 -->
            <td></td>
            <!-- 領料期限 -->
            <td style=" text-align: center;"><span style="color: #D23B5F;">{{item.qx}}</span></td>
            <!-- 治具交期 -->
            <td>{{item.delivery_date}}</td>
          </tr>
          <tr [(nzExpand)]="item.expand">
            <td colspan="10" style="padding-left:0rem !important;">
              <!-- 展开治具Table -->
              <nz-table #innerTable [nzData]="listData[key]" nzSize="middle" [nzShowPagination]="false">
      <tbody class="downData">
        <tr *ngFor="let item2 of listData[key]" id="second" style="text-align: center !important;">
          <!-- 箭头 -->
          <td style="width:50px;">
          </td>
          <!-- 備料狀態👇 -->
          <td style="width: 130px;"> <span *ngIf="item2.beiliao_ztai==1" style="color: #FACA00;">備料中</span>
            <span *ngIf="item2.beiliao_ztai==2" style="color: #21CC97;">已備料</span>
            <span *ngIf="item2.beiliao_ztai==3" style="color: #D23B5F;">缺料</span>
          </td>
          <!-- 单据号🔍 -->
          <td style="width: 230px;text-align: left;">{{item2.union_order}}
          </td>
          <!-- 名稱 -->
          <td style="width: 230px;text-align: left;" title={{item2.name}}><span
              style="text-overflow: -o-ellipsis-lastline;
            overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;">{{item2.name}}</span></td>
          <!-- 需求總量 -->
          <td style="width: 150px;">{{item2.quatity}}</td>
          <!-- 費用Charge部門 -->
          <td style="width: 150px;"></td>
          <!-- 工作時間統計 -->
          <td style="width: 150px;"></td>
          <!-- 領料時間 -->
          <td style="width: 150px;">{{item2.lingliao_riqi}}</td>
          <!-- 領料期限 -->
          <td style="width: 150px;">{{item2.lingliao_qixian}}</td>
          <!-- 治具交期 -->
          <td></td>
        </tr>
      </tbody>
    </nz-table>
    </td>
    <!-- <td id="fouth"></td> -->
    </tr>
    </ng-container>

    </tbody>

    </nz-table>
  </div>
</div>